<template>
  <a-modal :width="500" :visible="visible" title="设置列表" @ok="handleOk" @cancel="cancel">
    <a-form :labelCol="{ span: 7 }" :wrapperCol="{ span: 16 }">
      <a-form-item label="标签名" v-bind="validateInfos.labelName">
        <a-input placeholder="请输入标签名" v-model:value="modelRef.labelName" />
      </a-form-item>
      <a-form-item label="字段" v-bind="validateInfos.field">
        <a-input placeholder="请输入字段" v-model:value="modelRef.field" />
      </a-form-item>
      <a-form-item label="组件选择" v-bind="validateInfos.component">
        <a-select placeholder="请选择组件" v-model:value="modelRef.component">
          <a-select-option
            v-for="component in COMPONENT"
            :key="component.value"
            :value="component.value"
          >
            {{ component.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="是否必填" v-bind="validateInfos.isRequired">
        <a-radio-group
          :options="[
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ]"
          v-model:value="modelRef.isRequired"
        />
      </a-form-item>
      <a-form-item label="占位文本" v-bind="validateInfos.placeholder">
        <a-input placeholder="请输入占位文本" v-model:value="modelRef.placeholder" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="cancel">返回</a-button>
      <a-button @click="resetParams">重置参数</a-button>
      <a-button key="submit" type="primary" @click="handleOk">保存</a-button>
    </template>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from 'vue';
import { useForm } from '@ant-design-vue/use';
import { COMPONENT } from '../utils/constant';
import { message } from 'ant-design-vue';
import _ from 'lodash-es';
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    form: {
      type: Object,
      default: () => ({
        index: undefined,
        component: undefined,
        isRequired: 0,
        placeholder: '',
        field: '',
        labelName: '',
      }),
    },
  },
  emits: ['update:visible', 'add-form', 'edit-form'],
  setup(props, { emit }) {
    const { form } = toRefs(props);
    const state = reactive({
      modelRef: _.cloneDeep(form.value),
      rulesRef: {
        labelName: [
          {
            required: true,
            message: '请输入标签名称',
          },
        ],
        field: [
          {
            required: true,
            message: '请输入字段名',
          },
        ],
        component: [
          {
            required: true,
            message: '请选择合适的组件',
          },
        ],
        isRequired: [
          {
            required: true,
            message: '请选择是否必选',
            type: 'number',
          },
        ],
      },
    });
    watch(
      () => form,
      key => {
        console.log(key);
      },
    );

    const { resetFields, validate, validateInfos } = useForm(state.modelRef, state.rulesRef);

    const handleOk = () => {
      validate()
        .then(() => {
          const form = _.cloneDeep(toRaw(state.modelRef));
          form.index === undefined ? emit('add-form', form) : emit('edit-form', form);
          message.success('操作成功');
          cancel();
        })
        .catch(err => {
          console.log('error', err);
        });
    };

    const cancel = () => {
      emit('update:visible', false);
      resetFields();
    };

    const resetParams = () => {
      resetFields();
    };

    return {
      ...toRefs(state),
      validateInfos,
      resetParams,
      handleOk,
      cancel,
      COMPONENT,
    };
  },
});
</script>
<style lang="less" scoped>
@import url('../index.less');
// TODO
</style>
